<!-- 移动端 -->
<template>
  <div class="logn">
   <Row class="head">
     <Col span="24">
      <div class="top">
       <img src="../../../assets/images/mobile/logn01.jpg">
       <s></s>
       </div>
     </Col>
     <Col span="6" class="nav">
       <Card :padding="0" :bordered="false" :dis-hover="true">
         <div>
           <p><a href="#" class="first">首页</a></p>
           <p><a href="#">走进世贸</a></p>
           <p><a href="#">世贸动态</a></p>
           <p><a href="#">世贸服务</a></p>
           <p><a href="#">招商引资</a></p>
           <p><a href="#">关于我们</a></p>
           <p>×</p>
         </div>
       </Card>
     </Col>
   </Row>
   <Row>
      <Col span="24">
       <img src="../../../assets/images/mobile/logn02.jpg">
     </Col>
     <Col span="24" class="profile">
       <p>走进世贸</p>
       <p>WORLD TRADE PROFILE</p>
       <Card :padding="0" :bordered="false" :dis-hover="true">
         <img src="../../../assets/images/mobile/logn03.jpg">
         <div class="font">
           <p>&nbsp;&nbsp;在公司出现以前，个人独资企业是最典型的企业形式；与独资企业并存的是各种，合伙组织当时的合伙组织中最典型的就是家族经营团体，在公司产生以前，合伙组织都没有取得法人的地位……</p>
           <span>了解详情</span>
         </div>
       </Card>
     </Col>     
   </Row>
   <Row class="trends">
     <Col span="24">
       <p>世贸动态</p>
       <p>WORLD TRADE TRENDS</p>
     </Col>
     <Col span="11" class="left-img">
       <img src="../../../assets/images/mobile/logn04.jpg">
     </Col>
     <Col span="11" class="right-img">
       <img src="../../../assets/images/mobile/logn05.jpg">
       <img src="../../../assets/images/mobile/logn06.jpg">
     </Col>
     <div class="arr"><span><</span><span class="right">></span></div>
   </Row>
   <Row class="service">
     <Col span="24">
       <p>世贸服务</p>
       <p>WORLD TRADE TRENDS</p>
     </Col>
     <Col span="11" class="culture">
       <img src="../../../assets/images/mobile/logn07.jpg">
       <p>文化娱乐</p>
     </Col>
     <Col span="11" class="consult">
       <img src="../../../assets/images/mobile/logn08.jpg">
       <p>咨询中心</p>
     </Col>
     <Col span="11" class="serve">
       <img src="../../../assets/images/mobile/logn08.jpg">
       <p>服务中心</p>
     </Col>
     <Col span="11" class="member">
       <img src="../../../assets/images/mobile/logn08.jpg">
       <p>会员中心</p>
     </Col>
   </Row>
   <Row class="investment">
     <Col span="24">
       <p>招商引资</p>
       <p>ATTRACT INVESTMENT</p>
     </Col>
     <Col span="7" class="news">
       <img src="../../../assets/images/mobile/logn09.jpg">
       <div class="bottom-font">
         <p>投资新闻</p>
         <p>投资新闻投资新闻投资新闻投资新闻投资新闻投资新闻</p>
         <p>了解详情>></p>
       </div>
     </Col>
     <Col span="7" class="news">
       <img src="../../../assets/images/mobile/logn09.jpg">
       <div class="bottom-font">
         <p>投资新闻</p>
         <p>投资新闻投资新闻投资新闻投资新闻投资新闻投资新闻</p>
         <p>了解详情>></p>
       </div>
     </Col>
     <Col span="7" class="news">
       <img src="../../../assets/images/mobile/logn09.jpg">
       <div class="bottom-font">
         <p>投资新闻</p>
         <p>投资新闻投资新闻投资新闻投资新闻投资新闻投资新闻</p>
         <p>了解详情>></p>
       </div>
     </Col>
   </Row>
   <Row class="foot">
     <Col span="18" class="left-font">
       <dl>
         <dd>地址：北京市昌平区平西王府平西王府</dd>
         <dd>电话：400-1100-2222</dd>
         <dd>邮箱：123456789@126.com</dd>
         <dd>传真：400-6666-1234 <span>您的留言</span></dd>
       </dl>
     </Col>
     <Col span="5" class="weixin">
       <img src="../../../assets/images/mobile/weixin.jpg">
     </Col>
     <Col span="24">
      <p>常州市世界贸易中心科技有限公司</p>
      <p>©2014-2016 sjq315.com . All Rights Reserved.
        备案号：闽ICP备12016225号</p>
     </Col>
   </Row>
  </div>
</template>

<script>

export default {
  components: {
   
  },
  data() {
    return {
      formItem: {
        user: "",
        password: "",
        checkbox: []
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          },
          {
            type: "string",
            min: 6,
            message: "密码长度不能小于6位",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("登陆成功!");
          setTimeout(()=>{
            this.$router.push({
              name:'index'
            },2000)
          })
        } else {
          this.$Message.error("输入有误");
        }
      });
    },
    toForget(){
      this.$router.push({
        name:"forget"
      })
    }
  }
};
</script>

<style lang="less">
  .logn {
    overflow-x: hidden;
    img {
      max-width: 100%;
    }
    .head{
      .top {
          position: relative;
          s {
            width: 2rem;
            height: 1.6rem;
            background: url("../../../assets/images/mobile/more.png") no-repeat;
            background-size: 100%;
            position: absolute;
            top: 0.5rem;
            left: 1rem;
          }
        }
        .nav {
          position: absolute;
          top: 0;
          left: 0;
          .ivu-card {
          width: 4.9rem;
          height: 10.6rem;
          background-color: #fff;
          z-index: 999;
          display: none;
            div {
              margin: 0 0.25rem;
              p {
                font: 0.64rem/1.45rem "Microsoft YaHei";
                text-align: center;
                border-bottom: 1px solid #ededed;
                a {
                  color: #666;
                }                
               .first {
                  color: #5b84ac;
               }
              }
              p:last-child {
                color: #5b84ac;
                font-size: 1rem;
                border: none;
              }
              
            }
          }
        }
        
      }
      .profile {
        p:nth-child(1) {
          font: 0.9rem/2.2rem "Microsoft YaHei";
          color: #5b84ac;
          text-align: center;
        }
        p:nth-child(2) {
          font: 0.42rem/0.42rem "Microsoft YaHei";
          color: #5b84ac;
          text-align: center;
          margin-bottom: 0.5rem;
        }
        .ivu-card {
          position: relative;
          margin: 0.5rem;
          .font {
            width: 12.5rem;
            height: 5.6rem;
            border: 1px solid #333;
            background-color: #fff;
            position: absolute;
            top: 0.8rem;
            right: 0;
            p {
              font: 0.5rem/0.7rem "Microsoft YaHei";
              color: #000;
              text-align: left;
            }
            span {
              float: right;
              width: 4.5rem;
              height: 2.5rem;
              text-align: center;
              font: 0.4rem/1rem "Microsoft YaHei";
              color: #5b84ac;
              background: url("../../../assets/images/mobile/know.png") no-repeat;
              background-size: 100%;
            }
          }
        }
      }
      .trends {
        position: relative;
        p:nth-child(1) {
          font: 0.9rem/2.2rem "Microsoft YaHei";
          color: #5b84ac;
          text-align: center;
        }
        p:nth-child(2) {
          font: 0.42rem/0.42rem "Microsoft YaHei";
          color: #5b84ac;
          text-align: center;
          margin-bottom: 0.5rem;
        }
        .left-img {
        margin: 0 0.5rem 0 0.5rem;
        }
      .right-img img:first-child {
        margin-bottom: 0.3rem;
        }
        .arr {
          span {
            width: 2rem;
            height: 4rem;
            background-color: rgba(11,9,13,0.67);
            font: 700 2rem/4rem "SimHei";
            color: #fff;
            text-align: center;
            position: absolute;
            left: 1rem;
            bottom: 2rem;
          }
          .right {
            right: 1rem;
            left: auto;
          }
        }
      }
      .service {
        p:nth-child(1) {
          font: 0.9rem/2.2rem "Microsoft YaHei";
          color: #5b84ac;
          text-align: center;
        }
        p:nth-child(2) {
          font: 0.42rem/0.42rem "Microsoft YaHei";
          color: #5b84ac;
          text-align: center;
          margin-bottom: 0.5rem;
        }
        .culture {
          margin-left: 0.5rem;
          position: relative;
          p {
            width: 100%;
            margin-bottom: 0;
            font: 0.63rem/1.6rem "Microsoft YaHei";
            color: #fff;
            position: absolute;
            top: 45%;
          }
        }
        .consult {
          margin-left: 0.5rem;
          position: relative;
          p {
            width: 100%;
            margin-bottom: 0;
            background-color: rgba(91,93,97,0.57);
            font: 0.63rem/1.6rem "Microsoft YaHei";
            color: #fff;
            position: absolute;
            top: 45%;
          }
        }
        .serve {
          margin-left: 0.5rem;
          margin-top: 0.5rem;
          position: relative;
          p {
            width: 100%;
            margin-bottom: 0;
            background-color: rgba(91,93,97,0.57);
            font: 0.63rem/1.6rem "Microsoft YaHei";
            color: #fff;
            position: absolute;
            top: 45%;
          }
        }
        .member {
          margin-left: 0.5rem;
          margin-top: 0.5rem;
          position: relative;
          p {
            width: 100%;
            margin-bottom: 0;
            background-color: rgba(91,93,97,0.57);
            font: 0.63rem/1.6rem "Microsoft YaHei";
            color: #fff;
            position: absolute;
            top: 45%;
          }
        }
      }
      .investment {
        margin-bottom: 1rem;
        p:nth-child(1) {
          font: 0.9rem/2.2rem "Microsoft YaHei";
          color: #5b84ac;
          text-align: center;
        }
        p:nth-child(2) {
          font: 0.42rem/0.42rem "Microsoft YaHei";
          color: #5b84ac;
          text-align: center;
          margin-bottom: 0.5rem;
        }
        .news {
          margin-left: 0.5rem;
          .bottom-font {
            width: 100%;
            background-color: #e5e5e5;
            p:nth-child(1) {
              font: 700 0.56rem/1.3rem "Microsoft YaHei";
              color: #000;
              text-align: left;
              margin-left: 0.5rem;
            }
            p:nth-child(2) {
              font: 0.43rem/1rem "Microsoft YaHei";
              color: #666;
              text-align: left;
              margin-left: 0.5rem;
              margin-bottom: 0;
            }
            p:nth-child(3) {
              width: 100%;
              padding-bottom: 0.5rem;
              font: 0.32rem/1rem "Microsoft YaHei";
              color: #108beb;
              text-align: right;
            }
          }
        }
      }
      .foot {
        // height: 10rem;
        background: url("../../../assets/images/mobile/logn10.jpg") no-repeat;
        background-size: 100%;
        .left-font {
          margin: 2.5rem 0 0 0.5rem;
          dl {
            font: 0.53rem/0.53rem "Microsoft YaHei";
            color: #fff;
            dd {
              margin-bottom: 0.6rem;
            }
            span {
              width: 4rem;
              height: 1rem;
              margin-right: 2rem;
              background: url("../../../assets/images/mobile/words.png") no-repeat;
              background-size: 100%;
              font: 0.5rem/1rem "Microsoft YaHei";
              color: #335a81;
              text-align: center;
              float: right;
            }
          } 
        }
        .weixin {
          img {
            margin: 2.2rem 0.5rem 0 0;
          }
        }
        p {
          font: 0.43rem/0.8rem "Microsoft YaHei";
          color: #fff;
          text-align: center;
        }
      }
  }
</style>